<template>
  <div class="special_vehicles">
    <c-title :hide="false" :text="'特种车辆申请'"></c-title>
    <van-tabs v-model="active" @change="onChange">
      <van-tab title="全部" name=""></van-tab>
      <van-tab title="待审核" name="0"></van-tab>
      <van-tab title="审核通过" name="1"></van-tab>
      <van-tab title="审核驳回" name="-1"></van-tab>
    </van-tabs>
    <div class="list">
      <div class="lis" v-for="item in infoList" :key="item.id">
        <div class="list_top">
          <div class="list_top_l">{{ item.created_at }}</div>
          <div class="list_top_r">{{ item.status_name }}</div>
        </div>
        <div class="leftTXT" v-if="item.group">客群：{{ item.group.group_name }}</div>
        <div class="leftTXT">车牌号：{{ item.license_no }}</div>
        <div class="imgBox">
          <div class="txt" v-if="item.group">{{ item.group.tip_one }}：</div>
          <div class="imgList">
            <div v-for="(ele, index) in item.work_license_imgs" :key="index">
              <img :src="ele" alt="" />
            </div>
          </div>
        </div>
        <div class="imgBox">
          <div class="txt" v-if="item.group">{{ item.group.tip_two }}：</div>
          <div class="imgList">
            <div v-for="(ele, index) in item.driving_license_imgs" :key="index">
              <img :src="ele" alt="" />
            </div>
          </div>
        </div>
        <div class="reason" v-if="item.reject_msg">驳回原因：{{ item.reject_msg }}</div>
      </div>
      <van-empty :image="emptyImg" description="暂无更多" v-if="infoList.length <= 0" />
    </div>
    <div class="bottom_btn set-pc-style">
      <div class="btn" @click="applyTap">特种车辆申请</div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      active: "",
      infoList: [],
      page: 1,
      total_page: 0,
      isLoadMore: true,
      emptyImg: "https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Fcar-manage%2FlistNone%402x.png"
    };
  },
  activated() {
    this.initGet();
    this.getData();
  },
  methods: {
    applyTap() {
      this.$router.push(this.fun.getUrl("carAppeal_authentication", {}));
    },
    onChange(e) {
      this.initGet();
      this.getData();
    },
    initGet() {
      this.page = 1;
      this.total_page = 0;
      this.infoList = [];
      this.isLoadMore = true;
    },
    async getData() {
      let json = {
        search: {
          status: this.active
        }
      };
      let { data, msg, result } = await $http.post("plugin.car-manage.frontend.controllers.special.index", json, "");
      console.log(data, msg, result);
      if (result) {
        this.infoList = data.data;
        this.total_page = data.last_page;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {
          page: this.page,
          search: {
            status: this.active
          }
        };
        let { data, msg, result } = await $http.post("plugin.car-manage.frontend.controllers.special.index", json, "");
        this.isLoadMore = true;
        if (result) {
          this.infoList = this.infoList.concat(data.data);
        } else {
          app.$toast(msg);
          this.isLoadMore = false;
          this.page = this.page - 1;
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.bottom_btn {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #ffffff;
  padding: 0.63rem 0.75rem;
  .btn {
    height: 2.5rem;
    background: #f15353;
    border-radius: 1.28rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.94rem;
    color: #ffffff;
  }
}
.list {
  padding: 0 0.75rem 5rem 0.75rem;
  box-sizing: border-box;
  .lis {
    margin-top: 0.63rem;
    background: #ffffff;
    padding: 0.63rem;
    box-sizing: border-box;
    border-radius: 0.5rem;
    .leftTXT {
      font-size: 0.88rem;
      line-height: 0.98rem;
      margin-top: 0.94rem;
      text-align: left;
    }
    .imgBox {
      margin-top: 0.94rem;
      .txt {
        font-size: 0.88rem;
        line-height: 0.98rem;
        text-align: left;
      }
      .imgList {
        display: flex;
        flex-wrap: wrap;
        img {
          width: 6.56rem;
          height: 6.56rem;
          border-radius: 0.5rem;
          margin: 0;
          margin-right: 0.5rem;
          margin-top: 0.63rem;
        }
      }
    }
    .reason {
      margin-top: 0.94rem;
      background: #f5f5f5;
      border-radius: 0.5rem;
      padding: 0.66rem 0.63rem;
      box-sizing: border-box;
      font-size: 0.81rem;
      color: #3b3b4a;
      line-height: 0.98rem;
      text-align: left;
    }
    .list_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 0.91rem;
      border-bottom: 1px solid #f5f5f5;
      .list_top_l {
        font-weight: 500;
        font-size: 0.88rem;
        flex: 1;
        text-align: left;
      }
      .list_top_r {
        font-size: 0.81rem;
        color: #f15353;
        flex-shrink: 0;
      }
    }
  }
}
</style>
